var ElectroplateDetail = function () {
  var template = /* html */ `
    <div class="electroplate-detail">
      <div v-for="(detail,index) in detailList" :key="'detail_'+index" class="electroplate-detail-item">
        <div>
          <span>物料:{{detail.materialType}}</span>
          <span style="margin-left:15px">电镀色类型:{{detail.electroplateType}}</span>
        </div>
        <div class="ele-color">
          <div>电镀颜色:</div>
          <div style="flex:1">{{detail.colorList.join(',')}}</div>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    computed: {
      detailList: function () {
        return this.getDetailList();
      }
    },

    data: function () {
      return {};
    },

    methods: {
      getDetailList: function () {
        var order = this.order;
        var mergeOrders = order.mergeOrders;
        var orderGroup = _.groupBy(mergeOrders, 'maching');
        var detailList = [];
        for (var materialType in orderGroup) {
          var orders = orderGroup[materialType];
          var colorList = _.map(orders,'additionalColor');
          detailList.push({
            materialType: materialType,
            electroplateType: orders[0].additionalMaterialType,
            colorList: colorList
          });
        }
        return detailList;
      }
    },

    template: template
  };
}();